import React, {Component} from 'react';
import {Route} from "react-router-dom";
import IndexPage from '../pages/IndexPage'
import EChartSample from '../pages/Samples/EChartSample'
import {Layout, Menu, Icon} from 'antd';
import {BrowserRouter as Router, NavLink} from "react-router-dom";
import Routes from '../routing/Routes'
import './AppRouter.less'
import ApplicationPage from "../pages/Application/ApplicationPage";

const {Header, Content, Footer, Sider} = Layout;
const SubMenu = Menu.SubMenu;

class AppRouter extends Component {
    render() {
        return (
            <Router>
                <Layout>
                    <Sider
                        breakpoint="lg"
                        collapsedWidth="0"
                        onCollapse={(collapsed, type) => {
                            console.log(collapsed, type);
                        }}>
                        <div className="logo"/>
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                            <Menu.Item key="1">
                                <NavLink to={Routes.STARTPAGE}>
                                    <Icon type="team"/>
                                    <span className="nav-text">首页</span>
                                </NavLink>
                            </Menu.Item>
                            <SubMenu
                                key="system"
                                title={<span><Icon type="video-camera"/><span>系统管理</span></span>}>
                                <Menu.Item key="3">
                                    <NavLink to={Routes.ApplicationPage}>
                                        应用管理
                                    </NavLink>
                                </Menu.Item>
                            </SubMenu>
                            <SubMenu
                                key="sub1"
                                title={<span><Icon type="video-camera"/><span>示例页面</span></span>}>
                                <Menu.Item key="3">
                                    <NavLink to={Routes.EChartSamplePage}>
                                        EChart示例
                                    </NavLink>
                                </Menu.Item>
                            </SubMenu>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header style={{background: '#fff', padding: 0}}/>
                        <Content style={{margin: '24px 16px 0'}}>
                            <div style={{padding: 24, background: '#fff', minHeight: 543}}>
                                <Route exact path="/" component={IndexPage}/>
                                <Route path="/sample" component={EChartSample}/>
                                <Route path={Routes.ApplicationPage} component={ApplicationPage}/>
                            </div>
                        </Content>
                        <Footer style={{textAlign: 'center'}}>
                            React Starter
                        </Footer>
                    </Layout>
                </Layout>
            </Router>

        );
    }
}

export default AppRouter;
